<%= form_for config, url: settings_notifications_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
  <%= f.hidden_field :key %>
  <div class="form-control">
    <% record = Struct.new(:first_duration, :second_duration, :third_duration).new(*(f.object.value || {}).values_at('first_duration', 'second_duration', 'third_duration')) %>
    <div class="flex flex-col md:flex-row gap-4">
      <div class="w-full">
        <%= f.fields_for :value, record  do |ff| %>
          <%= ff.label :first_duration, 'First reminder in', class: 'label' %>
          <%= ff.select :first_duration, AccountConfigs::REMINDER_DURATIONS.invert, { include_blank: 'None' }, class: 'base-select' %>
        <% end %>
      </div>
      <div class="w-full">
        <%= f.fields_for :value, record  do |ff| %>
          <%= ff.label :second_duration, 'Second reminder in', class: 'label' %>
          <%= ff.select :second_duration, AccountConfigs::REMINDER_DURATIONS.invert, { include_blank: 'None' }, class: 'base-select' %>
        <% end %>
      </div>
      <div class="w-full">
        <%= f.fields_for :value, record  do |ff| %>
          <%= ff.label :third_duration, 'Third reminder in', class: 'label' %>
          <%= ff.select :third_duration, AccountConfigs::REMINDER_DURATIONS.invert, { include_blank: 'None' }, class: 'base-select' %>
        <% end %>
      </div>
    </div>
  </div>
  <div class="form-control pt-4">
    <%= f.button button_title(title: 'Save', disabled_with: 'Updating'), class: 'base-button' %>
  </div>
<% end %>
